<template>
  <section>
    <TableList2 :list="list" :column="column">
      <div slot="column2" class="noBlueBg">
        <el-table-column
          prop="sectionName"
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="editRecord (scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" plain @click="delRecord(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="center"
          width="200"
          label="中心名称">
        </el-table-column>

        <el-table-column
          prop="cars"
          label="管辖车辆">
        </el-table-column>

      </div>
      <div slot="option" class="noBlueBg">
        <el-form :inline="true" :model="options" class="bottom-border" ref="roadOptionForm">
          <el-form-item label="中心名称" prop="center">
            <el-input v-model="options.center" clearable placeholder="请输入中心名称" size="mini"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" @click="loadList"><span class="el-icon el-icon-search"></span>
              查询
            </el-button>
            <el-button size="mini" @click="resetOption('roadOptionForm')"><span
              class="el-icon el-icon-refresh-left"></span> 重置
            </el-button>
          </el-form-item>
          <el-form-item class="floatRight">
            <el-button size="mini" type="success" @click="addRecord "><span class="el-icon el-icon-plus"></span>新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="page noBlueBg" slot="bottom">
        <el-pagination
          @size-change="changeRoadSize"
          @current-change="changeRoadPage"
          :page-sizes="[20, 50, 100, 200]"
          :current-page="page"
          :page-size="limit"
          layout="sizes,total,prev, pager, next, jumper"
          :total="totals">
        </el-pagination>
      </div>
    </TableList2>
    <Dialog :cfg="dialogCfg" ref="dialog">
      <el-form :model="editData" label-width="80px" :rules="rules" ref="addForm">
        <el-form-item label="中心名称" prop="center">
          <el-input v-model="editData.center" clearable placeholder="请输入用户名" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="管辖车辆" prop="cars">
          <el-input type="textarea"  v-model="editData.cars" clearable placeholder="请输入管辖车辆,多个车辆以分号','分割" size="mini" rows="5"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
  </section>
</template>

<script>
  import TableList2 from 'comp/common/TableList2';

  import Dialog from 'comp/common/Dialog.vue';

  export default {
    name: "Cars",
    components: {
      Dialog,
      TableList2
    },
    data() {
      return {
        list: [],


        limit: 20,
        page: 1,
        pages: 1,
        totals: 0,
        column: [],
        options: {
          center: ''
        },





        dialogCfg: {},
        editData: {
          center: '',
          cars: '',
        },
        rules: {
          center: [
            {required: true, message: '请输入中心名称', trigger: 'change'}
          ],
          cars: [
            {required: true, message: '请输入管辖车辆', trigger: 'change'}
          ]
        }
      }
    },
    mounted() {
      this.loadList();

    },
    methods: {

      loadList() {
        this.$server('patrol.cars.list',{
          ...this.options
        },'list').then(data => {
          this.list = data;
          this.total = data.length
        });

        this.$kkui.loading_deepBlue.hide();
      },

      addRecord () {
        this.editData={};
        this.dialogCfg = {
          title: '新增车辆',
          closeShow: true,
          footerShow: true,
          width: 600,
          height: 300,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$server('patrol.cars.add',this.editData).then(data => {
                  this.$kkui.msg({
                    icon: '1',
                    cont: '新增成功！'
                  });
                  this.initEditData();
                  this.loadList();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },
      editRecord (data) {
        this.editData = {...data};
        this.dialogCfg = {
          title: '编辑路段',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 400,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$server('patrol.cars.edit',{
                  ...this.editData
                }).then(data => {
                  this.loadList();
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },
      delRecord(id) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此路段吗？',
          callback: () => {
            this.$server('patrol.cars.del',[id*1]).then(data => {
              this.$kkui.msg({
                cont: '删除成功！'
              });
              this.loadList();
            })
          }
        });
      },

      initEditData() {
        this.editData = {
          center: '',
          cars: '',
        }
      },

      changeRoadSize(limit) {
        this.limit = limit;
        this.loadList();
      },

      changeRoadPage(page) {
        this.page = page;
        this.loadList();
      },
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadList();
      }
    }
  }
</script>

<style scoped>
  section{
    flex: 1;
    background-color: #f0f0f0;
    padding: 10px 15px;
  }
</style>
